<script setup>
import { computed } from 'vue';
import { useStore } from 'Vuex';
import { useRoute,useRouter } from 'vue-router';
// 获取store
const store = useStore();
// 获取菜单
const selectMenu = computed(() => store.state.menu.selectMenu)
// 获取路由
const route = useRoute();
const router = useRouter();
// 
const userInfo =  JSON.parse(localStorage.getItem('userInfo'))
// 关闭标签
const closeTab = (item, index) => {
    // 删除菜单
    store.commit('closeMenu', item)
    // 删除的非当前页tag,不做任何处理
    if (route.path !== item.path) {
        return
    }
    // 获取当前菜单
    const selectMenuData = selectMenu.value;
    // 如果删除的事最后一项
    if (index === selectMenuData.length) {
        // 如果tag只有一个元素
        if (!selectMenuData.length) {
            router.push('/')
        } else {
            router.push({
                path: selectMenuData[index - 1].path
            })
        }
    } else {
        //如果删除的事中间位置tag
        router.push({
            path: selectMenuData[index].path
        })
    }

}

// 点击事件
const handleClick =(command) => {
    if (command === 'cancel') {
        localStorage.removeItem('pz_token');
        localStorage.removeItem('userInfo');
        localStorage.removeItem('pz-v3pz');
        window.location.href = window.location.origin;
    }
}


</script>

<template>
    <div class="header-container">
        <!-- 左边布局 -->
        <div class="header-left flex-box">
            <!-- 图标 -->
            <el-icon class="icon" size="20" @click="store.commit('collapseMenu')">
                <Fold />
            </el-icon>
            <!-- 动态框 -->
            <ul class="flex-box">
                <li v-for="(item, index) in selectMenu" :key="item.path" :class="{ selected: route.path === item.path }"
                    class="tab  flex-box">
                    <!-- 图标 -->
                    <el-icon size="12">
                        <component :is="item.icon"></component>
                    </el-icon>
                    <!-- 跳转 -->
                    <router-link class="text flex-box" :to="item.path"> {{ item.name }} </router-link>
                    <!-- 关闭按钮 -->
                    <el-icon class="close" size="12" @click="closeTab(item, index)">
                        <Close />
                    </el-icon>
                </li>


            </ul>
        </div>
        <!-- 右边布局 -->
        <div class="header-right">
            <el-dropdown @command="handleClick">
                <!-- 右侧显示 -->
                <div class="el-dropdown-link flex-box">
                    <!-- 头像 -->
                    <div>
                        <el-avatar :src="userInfo.avatar" />
                    </div>
                    <!-- 名称 -->
                    <p class="user-name">{{ userInfo.name }}</p>
                </div>
                <!-- 右侧下拉菜单 -->
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="cancel">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
    </div>
</template>

<style lang="less" scoped>
// 弹性盒子
.flex-box {
    display: flex; // 弹性布局
    align-items: center; // 水平居中
    height: 100%;
}

.header-container {
    // 公共布局
    display: flex; //  弹性布局
    justify-content: space-between; // 两端对齐
    align-items: center; // 水平居中
    height: 100%; // 高度为100%
    background-color: #fff; // 背景色为白色
    padding-right: 25px; // 右侧内边距为25px

    // 左边布局
    .header-left {
        height: 100%;

        .icon:hover {
            cursor: pointer; // 鼠标移入时显示小手
            background-color: #f5f5f5;
        }

        .tab {
            padding: 0 10px;
            height: 100%;

            .text {
                margin: 0 5px;

            }

            .close {
                visibility: hidden;
            }

            &.selected {
                a {
                    color: #409eff; // 选中时字体颜色为黑色

                }

                i {
                    color: #409eff;
                }

                background-color: #f5f5f5;
            }

        }

        .tab:hover {
            background-color: #f5f5f5;

            .close {
                visibility: inherit;
                cursor: pointer; // 鼠标移入时显示小手
                color: #000
            }
        }
    }



    // 右边布局
    .header-right {
        .user-name {
            margin-left: 10px;
        }
    }


    // a标签
    a {
        height: 100%;
        color: #333;
        font-size: 15px;
    }


}
</style>